import React, { useEffect, useState } from 'react';
import { Tabs, Modal } from 'antd';
import { FolderOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
import { Resizable } from 'react-resizable';
import FolderSidebar from './FolderSidebar';
import CommandSidebar from './CommandSidebar';

import './index.less';

interface HandleProps {
    handleAxis: string;
    [key: string]: any;
}

const ResizeHandle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
    const { handleAxis, ...restProps } = props;
    return <div ref={ref} className={`right-sidebar-resize-handle handle-${handleAxis}`} {...restProps} />;
});

const PanelSidebar: React.FC = () => {
    const [width, setWidth] = useState(300);
    const [activeTab, setEditorActiveTab] = useState('1');

    const items = [
        {
            key: '1',
            label: <FolderOutlined />,
            title: '脚本列表',
            children: (
                <div className="sidebar-content">
                    <div className="section-title">脚本列表</div>
                    <div className="folder-list">
                        <FolderSidebar />
                    </div>
                </div>
            ),
        },
        {
            key: '2',
            label: <AppstoreOutlined />,
            title: '命令列表',
            children: (
                <div className="sidebar-content">
                    <div className="section-title">命令列表</div>
                    <div className="command-list">
                        <CommandSidebar />
                    </div>
                </div>
            ),
        },
    ];

    return (
        <Resizable
            width={width}
            height={window.innerHeight}
            onResize={(e, { size }) => {
                setWidth(size.width);
            }}
            handle={<ResizeHandle handleAxis="right" />}
            axis="x"
            minConstraints={[260, 0]}
            maxConstraints={[400, 0]}
        >
            <div className="right-sidebar" style={{ width }}>
                <Tabs
                    tabBarExtraContent={
                        <SettingOutlined onClick={() => {
                            Modal.confirm({
                                title: '设置',
                                content: '设置内容',
                                onOk: () => {
                                    console.log('设置');
                                },
                                onCancel: () => {
                                    console.log('取消');
                                },
                            });
                        }} />}
                    activeKey={activeTab}
                    onChange={setEditorActiveTab}
                    items={items}
                    tabPosition="left"
                    className="sidebar-tabs"
                />
            </div>

        </Resizable>
    );
};

export default PanelSidebar; 